<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Q Light Controller Plus - Virtual Console Animation</TITLE>
<SCRIPT SRC="utility.js" TYPE="text/javascript"></SCRIPT>
<link href="style.css" rel="stylesheet" type="text/css" />
</HEAD>
<BODY onLoad="replaceqrc()">

<H1><IMG SRC="qrc:/animation.png" ALIGN="absmiddle"> Virtual Console Animation</H1>

<P>An Animation widget is a complete tool to operate with the
<A HREF="concept.html#Function">RGB Matrices</A> of your project.<br>
It displays several graphical elements to fully control a matrix during live shows.<br>
Most importantly, it allows you to define a number of so called "custom controls"
to quickly recall presets, colors and properties and apply them immediately to a
running matrix.
</P>

<H2>Introduction</H2>

When clicking on the <img src="qrc:/animation.png"> icon, an Animation widget will be
added to your Virtual Console.<br>
By default, the widget will display 4 elements:

<UL>
 <LI>On the leftmost side, a slider to control the playback and the intensity of a RGB Matrix.<br>
     The slider movement can be associated to an external controller input line.<br>
     It behaves exactly like a <A HREF="vcslider.html">Virtual Console Slider</A> in playback mode.
 </LI>
 <LI>On the top right side, two <A HREF="concept.html#ClickAndGo">Click &amp; Go</A> buttons
     to set the matrix start and end color. When clicking on them during the
     <A HREF="concept.html#Modes">Operate Mode</A>, a color picker menu will be displayed.
 </LI>
 <LI>Below the two buttons, a drop down menu to select the desired Matrix animation or preset.
 </LI>
</UL>

The space below the animation menu, is reserved for Custom Controls. They can be defined in the
widget configuration window and each of them will be displayed as a single button.<br>
Each custom control can be associated to a key combination or an external controller input line.
</P>

<H2>Configuration</H2>

<P>
An Animation widget can be configured with the properties
<IMG SRC="qrc:/edit.png" ALIGN="bottom"> button found in the Virtual Console toolbar or
by double clicking the widget itself.
</P>

<H3>General Page</H3>

<TABLE BORDER=1 class="qlcTable">
 <TR>
  <TD>
   <B>Widget name</B>
  </TD>
  <TD>
   Set the friendly name of the widget, displayed above the two Click &amp; Go buttons
  </TD>
 </TR>
 <TR>
  <TD>
   <B>Matrix Function</B>
  </TD>
  <TD>
   Shows you the name of the <A HREF="concept.html#RGBMatrix">RGB Matrix</A> Function that
   is currently assigned to the widget.
   <P>
    <IMG SRC="qrc:/attach.png" ALIGN="absmiddle"> Attach a RGB Matrix Function to the widget<BR>
    <IMG SRC="qrc:/detach.png" ALIGN="absmiddle"> Detach the current function from the widget
   </P>
  </TD>
 </TR>
 <TR>
  <TD>
   <B>Apply color and preset changes immediately</B>
  </TD>
  <TD>Select whether the changes to the Matrix must be applied immediately or at the next Matrix loop
  </TD>
 </TR>
 <TR>
  <TD><B>External input</B></TD>
  <TD>
   You can attach an external input channel from an input device (like a slider
   board) to the widget slider so that you don't always have to use the mouse or touch screen
   to control the Matrix playback or intensity.
   <UL>
    <LI>Input universe: The input universe from which you wish to get input data for
    the slider.</LI>
    <LI>Input channel: The individual input channel within the selected input
    universe that you wish to use for controlling the slider.</LI>
    <LI>Auto Detect: When toggled, you can just move/press a button/slider/knob
    on your external input hardware and it will be automatically assigned to the
    slider. The latest combination is shown on the text boxes when QLC+ receives
    input data. If you don't see anything in the boxes, your input connection
    might have a problem that you need to fix first.</LI>
    <LI>Choose...: Shows the <A HREF="selectinputchannel.html">Select Input Channel</A>
    dialog that you can use to select an input channel manually.</LI>
   </UL>
  </TD>
 </TR>
</TABLE>

<H3>Custom Controls Page</H3>

<P>
A custom control is a "shortcut" to a functionality of a RGB Matrix.<br>
Basically you can control all the options that are normally used in the
<A HREF="rgbmatrixeditor.html">RGB Matrix Editor</A> during the design
phase of a show. The only option you can't control is the Fixture group
used by a RGB Matrix Function.<br>
In this configuration page the user can define any number of custom controls
depending on the needs during a live performance.<br>
Each custom control is represented as a button in the Animation widget layout
and can be either clicked with the mouse or pressed on a touchscreen, or
associated to a key combination or an external controller input line.
</P>

<TABLE BORDER=1 class="qlcTable">
 <TR>
  <TD>
   <B><img src="qrc:/color.png" ALIGN="absmiddle"> Add start color</B>
  </TD>
  <TD>Add a Matrix start color control. When clicking this button,
   a color selection tool will be displayed.<br>
   The button displayed in the widget's layout will have a background color
   representing the one selected and the letter <B>S</B>.
  </TD>
 </TR>
 <TR>
  <TD>
   <B><img src="qrc:/color.png" ALIGN="absmiddle"> Add end color</B>
  </TD>
  <TD>Add a Matrix end color control. When clicking this button,
   a color selection tool will be displayed.<br>
   The button displayed in the widget's layout will have a background color
   representing the one selected and the letter <B>E</B>.
  </TD>
 </TR>
 <TR>
  <TD>
   <B><img src="qrc:/fileclose.png" ALIGN="absmiddle"> Add end color reset</B>
  </TD>
  <TD>Add a Matrix end color reset control.<br>
   The button displayed in the widget's layout will have a gray background color
   and when pressed, it will reset the current matrix end color (if previously set)
  </TD>
 </TR>
 <TR>
  <TD>
   <B><img src="qrc:/script.png" ALIGN="absmiddle"> Add preset</B>
  </TD>
  <TD>Add a Matrix preset control. When clicking this button,
   a dialog will be displayed for the preset selection.<br>
   The button displayed in the widget's layout will have a gray background color
   and a label corresponding to the preset's name.
  </TD>
 </TR>
 <TR>
  <TD>
   <B><img src="qrc:/fonts.png" ALIGN="absmiddle"> Add text</B>
  </TD>
  <TD>Add a Matrix text animation control. When clicking this button,
   a dialog will be displayed requiring to enter the desired text to be
   animated on the Matrix.<br>
   The button displayed in the widget's layout will have a gray background color
   and a label corresponding to the chosen text.
  </TD>
 </TR>
 <TR>
  <TD>
   <B><img src="qrc:/edit_remove.png" ALIGN="absmiddle"> Remove</B>
  </TD>
  <TD>Remove the currently selected control from the controls list.
  </TD>
 </TR>
</TABLE>

</BODY>
</HTML>
